<template>
	<view class="app-container progress-detail">
		<view>
			<u-parse :show-with-animation="true" :html="progressData.content"></u-parse>
		</view>
		<view class="progress-message">
			<view class="">
				<u-icon class="message-icon" name="eye" size="30"></u-icon>
				<text>{{progressData.browseNum}} 条阅读量</text>
			</view>
			<view class="">
				<u-icon class="message-icon" name="chat" size="30"></u-icon>
				<text>{{progressData.commentNum}} 条评论</text>
			</view>
			<view class="">
				<u-icon v-if="progressData.isLike" class="message-icon"  @click="handleIsLike(false)" name="thumb-up-fill" size="30"></u-icon>
				<u-icon v-else @click="handleIsLike(true)" class="message-icon" name="thumb-up" size="30"></u-icon>
				<text>{{progressData.likeNum}} 人点赞</text>
			</view>
		</view>
		<view class="progress-comment">
			<view class="progress-comment-item" v-for="temp in commentList">
				<view class="comment-left">
					<u-avatar size="60" :src="temp.avatar"></u-avatar>
				</view>
				<view class="comment-right">
					<view class="comment-right-top">
						{{temp.nickname}}
					</view>
					<view class="comment-right-bottom">
						{{temp.content}}
					</view>
				</view>
			</view>
			<view class="progress-comment-submit" style="display: flex;align-items: center;">
				<u-input style="flex: 1;margin-right: 20rpx;" confirm-type="评论" v-model="commentMsg" border ></u-input>
				<u-button type="success" size="default" @click="submitComment">评论</u-button> 
			</view>
		</view>
	</view>
</template>

<script>
	import * as that from '@/API/index.js'
	export default {
		data() {
			return {
				id:'',
				progressData:{},
				commentList:[],
				commentMsg:'',
			}
		},
		onLoad({id}) {
			this.id = id
			this.getDetail()
			this.getComment()
		},
		methods:{
			getDetail(){
				that.ProgressDetail(this.id).then(res =>{
					console.log(res)
					this.progressData = res.data
				})
			},
			getComment(){
				that.experimentsCommentList(this.id).then(res =>{
					console.log(res)
					this.commentList = res.data
					
				})
			},
			submitComment(){
				if(!this.commentMsg){
					uni.showToast({
						icon:'none',
						title:'评论为空！'
					})
					return
				}
				that.experimentsSubmitCommentList(this.id,this.commentMsg).then(res =>{
					that.experimentsCommentList(this.id).then(res =>{
						this.progressData.commentNum++
						this.commentList = res.data
						this.commentMsg = ""
					})
				})
			},
			handleIsLike(flag){
				if(flag){
					that.experimentsLike(this.id).then(res =>{
						this.progressData.isLike = flag
						this.progressData.likeNum++
						console.log(res)
					})
				}else{
					that.experimentsDisLike(this.id).then(res =>{
						this.progressData.isLike = flag
						this.progressData.likeNum--
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.progress-detail{
	.progress-message {
		margin-top: $uni-spacing-10;
		display: flex;
		color: #737373;
		&>view {
			margin-right: $uni-spacing-15;
			.message-icon {
				margin-right: 6rpx;
			}
		}
	}
	.progress-comment{
		height: auto;
		padding: $uni-spacing-10;
		// overflow: auto;
		.progress-comment-item{
			background-color: #F6F8F6;
			display: flex;
			padding: 20rpx;
			
			.comment-left{
				margin-right: $uni-spacing-10;
			}
			.comment-right{
				.comment-right-top{
					font-size: 24rpx;
				}
				.comment-right-bottom{
				font-size: 32rpx;
				}
				
			}
		}
		.progress-comment-submit{
			display: flex;
			padding: $uni-spacing-10 0;
		}
	}
}

</style>
